<!-- <template>
  <div>
  </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import {useRoute,useRouter} from 'vue-router'
const route=useRoute()
const router=useRouter()
const a=route.query.item
console.log(a)
</script>
<style scoped>
</style> -->
<template>
  <div class="fh" @click="fh1">返回</div>
  <div>
    <video style="width: 100%;height: 210px; margin-top: 20px;"   ref="videoPlayer" id="videoPlayer"></video>
  </div>
  <div class="dxss">
          <img src="./img/21.png" class="dxss1" alt="">
          <span class="dxss2">大型赛事</span>
          <span class="dxss3">更多</span>
          <img src="./img/20.png" class="dxss4" alt="">
          <span class="dxss5">></span>
          <div class="dxss_item">
            <div v-for="item in sslist" :key="item.id" class="dxss_item1">
              <img class="dxss_item1_one" :src="item.url" alt="">
              <div class="dxss_item1_two">{{ item.name }}</div>
              <div class="dxss_item1_three">已报名3362人</div>
              <div class="dxss_item1_four">仅剩63人</div>
              <div class="dxss_item1_five">距结束还剩</div>
              <div class="dxss_model1">{{ item.h }} </div><div  class="dxss_model2">{{ item.m }}</div><div  class="dxss_model3">{{ item.s }}</div>
              <div class="dxss_model4">：</div> <div  class="dxss_model5">:</div>
              <div class="dxss_item1_six">￥{{ item.price }} <span
                  style=" text-decoration: line-through;color:black">￥199</span></div>
              <button class="dxss_btn">点击报名</button>
            </div>
          </div>

        </div>
</template>
 
<script setup lang="ts">
import { reactive } from 'vue'
import videojs from "video.js"
import "video.js/dist/video-js.css"

import { ref, onMounted } from "vue"
import './css/Match.scss'
import {useRoute,useRouter} from 'vue-router'
const route=useRoute()
const router=useRouter()
const a=route.query.item
const sslist = [
  { id: 1, name: '第一届城市定向自行车比赛', url: new URL('./img/17.png', import.meta.url).href, price: 100, h: 20, m: 32, s: 10 },
  { id: 2, name: '第一届城市定向自行车比赛', url: new URL('./img/18.png', import.meta.url).href, price: 98, h: 10, m: 12, s: 10 },
  { id: 3, name: '第一届城市定向自行车比赛', url: new URL('./img/19.png', import.meta.url).href, price: 198, h: 15, m: 10, s: 15 },
]
//播放器的配置选项
const playerOptions = {
  autoplay: true,
  muted: false,
  loop: true,
  sources: [
    {
      type: "application/x-mpegURL",
      src:a
    }
  ],
  controlBar: {
    timeDivider: true,
    fullscreenToggle: true
  }
}
onMounted(() => {
  //拿到dom
  const playDom: any = document.getElementById("videoPlayer")
  // 用插件拿到实例对象
  const player: any = videojs(playDom, playerOptions)
  //播放
  player.play()
})
const fh1=()=>{
  console.log(111)
  router.push({
    path:'/home/match1'
  })
}
</script>
 
<style lang="scss" scoped>
.some {
  // border-style: $BORDER;
  // background: $BG;
  color: red;
}

#videoPlayer {
  width: 500px;
  height: 100px;
  // border: 1px solid black;
  // background-color: red;
  

}
.fh{
  position: absolute;
  z-index: 1000;
  top: 5px;
  left: 5px;
}
.dxss {
            position: absolute;
            left: 0px;
            top: 250px;
            width: 362px;
            height: 447px;
            line-height: 20px;
            border-radius: 12px;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: center;
            font-family: Roboto;
            margin-bottom: 10px;
            .dxss1 {
                width: 15px;
                height: 16px;
                background-color: rgba(255, 255, 255, 1);
                position: absolute;
                top: 21px;
                left: 16px;
            }

            .dxss2 {
                position: absolute;
                top: 17px;
                left: 35px;
                min-width: 64px;
                height: 22px;
                line-height: 22px;
                color: rgb(40, 36, 38);
                font-size: 16px;
                text-align: left;
                font-family: PingFangSC-bold;
            }

            .dxss3 {
                min-width: 24px;
                height: 17px;
                line-height: 17px;
                color: rgba(97, 97, 97, 1);
                font-size: 12px;
                text-align: left;
                font-family: PingFangSC-regular;
                position: absolute;
                top: 21px;
                left: 310px;
            }

            .dxss4 {
                width: 8px;
                height: 8px;
                background-color: rgba(255, 255, 255, 1);
                position: absolute;
                top: 25px;
                left: 338px;
            }

            .dxss5 {
                width: 8px;
                height: 8px;
                position: absolute;
                top: 18px;
                left: 338px;
                font-size: 10px;
                color: white;
            }

            .dxss_item {
                width: 362px;
                min-height: 102px;
                // border: 1px solid black;
                position: absolute;
                top: 56px;

                .dxss_item1 {

                    // position: absolute;
                    // top: 56px;
                    // left: 25px;
                    width: 322px;
                    height: 102px;
                    margin: 20px 0px;
                    margin-left: 25px;
                    // border: 1px solid black;
                    position: relative;

                    .dxss_item1_one {
                        position: absolute;
                        left: -17px;
                        width: 108px;
                    }

                    .dxss_item1_two {
                        // width: 322px;
                        // height: 102px;
                        position: absolute;
                        top: 1px;
                        left: 111px;
                    }

                    .dxss_item1_three {
                        width: 90px;
                        height: 5px;
                        line-height: 10px;

                        font-size: 10px;
                        // text-align: left;
                        font-family: SourceHanSansSC-regular;
                        position: absolute;
                        top: 30px;
                        left: 117px;
                        z-index: 9999;
                        color: white;
                        border-radius: 25px;
                        background-color: #f13c2f;

                    }

                    .dxss_item1_four {
                        width: 50px;
                        height: 15px;
                        line-height: 15px;
                        color: rgb(239, 46, 37);
                        font-size: 10px;
                        text-align: left;
                        font-family: SourceHanSansSC-regular;
                        position: absolute;
                        top: 30px;
                        left: 215px;
                    }

                    .dxss_item1_five {
                        min-width: 60px;
                        height: 17px;
                        line-height: 17px;
                        color: rgba(40, 36, 38, 1);
                        font-size: 12px;
                        text-align: left;
                        font-family: PingFangSC-regular;
                        position: absolute;
                        top: 51px;
                        left: 111px;
                    }

                    .dxss_item1_six {
                        position: absolute;
                        top: 84px;
                        left: 113px;
                        min-width: 33px;
                        height: 22px;
                        line-height: 17px;
                        color: rgb(225, 7, 7);
                        font-size: 12px;
                        text-align: left;
                        font-family: PingFangSC-bold;
                    }

                    .dxss_model1 {
                        width: 17px;
                        height: 17px;
                        line-height: 20px;
                        border-radius: 2px;
                        background-color: rgba(225, 7, 7, 1);
                        color: rgba(16, 16, 16, 1);
                        font-size: 14px;
                        text-align: center;
                        font-family: Roboto;
                        border: 1px solid rgba(255, 0, 0, 0);
                        position: absolute;
                        top: 51px;
                        left: 174px;
                        color: white;
                    }

                    .dxss_model2 {
                        width: 17px;
                        height: 17px;
                        line-height: 20px;
                        border-radius: 2px;
                        background-color: rgba(225, 7, 7, 1);
                        color: rgba(16, 16, 16, 1);
                        font-size: 14px;
                        text-align: center;
                        font-family: Roboto;
                        border: 1px solid rgba(255, 0, 0, 0);
                        position: absolute;
                        top: 51px;
                        left: 201px;
                        color: white;
                    }

                    .dxss_model3 {
                        width: 17px;
                        height: 17px;
                        line-height: 20px;
                        border-radius: 2px;
                        background-color: rgba(225, 7, 7, 1);
                        color: rgba(16, 16, 16, 1);
                        font-size: 14px;
                        text-align: center;
                        font-family: Roboto;
                        border: 1px solid rgba(255, 0, 0, 0);
                        position: absolute;
                        top: 51px;
                        left: 228px;
                        color: white;
                    }

                    .dxss_model4 {
                        width: 14px;
                        height: 20px;
                        line-height: 20px;
                        color: rgba(40, 36, 38, 1);
                        font-size: 14px;
                        text-align: left;
                        font-family: PingFangSC-regular;
                        position: absolute;
                        top: 50px;
                        left: 192px;
                        text-align: center;
                    }

                    .dxss_model5 {
                        width: 14px;
                        height: 20px;
                        line-height: 20px;
                        color: rgba(40, 36, 38, 1);
                        font-size: 14px;
                        text-align: left;
                        font-family: PingFangSC-regular;
                        position: absolute;
                        top: 50px;
                        left: 219px;
                        text-align: center;
                        
                    }

                    .dxss_btn {
                        position: absolute;
                        top: 70px;
                        left: 244px;
                        width: 80px;
                        height: 31px;
                        line-height: 20px;
                        border-radius: 27px;
                        background-color: rgba(26, 177, 227, 1);
                        color: rgba(16, 16, 16, 1);
                        font-size: 14px;
                        text-align: center;
                        font-family: Roboto;
                        border: 0px;
                        color: white;
                    }
                }
            }

        }
</style>